<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学院学生信息一览图</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body style="background-color: #000000; padding: 20px;">

<!-- 第一行 -->
<div id="app" style="display: flex; justify-content: center; margin-bottom: 20px;">
    <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px;">
        <div class="t_main_in" style="background-color: #e5f4f9;">
            <div class="ta">学院总人数</div>
            <div class="ta_value">750</div>
        </div>
        <div class="t_main_in" style="background-color: #e5f4f9;">
            <div class="ta">计算机类总人数</div>
            <div class="ta_value">477</div>
        </div>
        <div class="t_main_in" style="background-color: #e5f4f9;">
            <div class="ta">除计算机类总人数</div>
            <div class="ta_value">233</div>
        </div>
        <div class="t_main_in" style="background-color: #e5f4f9;">
            <div class="ta">总及格人数</div>
            <div class="ta_value">622</div>
        </div>
        <div class="t_main_in" style="background-color: #e5f4f9;">
            <div class="ta">总不及格人数</div>
            <div class="ta_value">{{ allUser }}</div>
        </div>
    </div>
</div>

<!-- 第二行 -->
<div style="display: flex; flex-direction: row; justify-content: center;">
    <div class="t_main" style="background-color: #e5f4f9; margin-right: 20px;">
        <div id="container" style="max-width: 600px; height: 350px;"></div>
    </div>
    <div class="t_main" style="background-color: #e5f4f9;">
        <div id="container1" style="max-width: 600px; height: 350px;"></div>
    </div>
</div>

<script>
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'column' // 平滑的曲线图：spline
        },
        title: {
            text: '人工智能学院各专业人数统计',
            align: 'center'
        },
        subtitle: {
            text: '数据来源：数据库',
            align: 'left'
        },
        xAxis: {
            crosshair: true,
            accessibility: {
                description: '人数'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '人数'
            }
        },
        tooltip: {
            valueSuffix: ' (人)'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: []
    });

    var chart1 = Highcharts.chart('container1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '各分数段人数所占比例',
            align: 'center'
        },
        tooltip: {
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: []
    });

    var app = new Vue({
        el: '#app',
        data: {
            allUser: 0
        },
        created: function () {
            this.loadG2();
        },
        methods: {
            loadG2() {
                var that = this;
                axios.post('http://localhost:8080/api/user-count/user-number').then(function (res) {
                    if (res.data.code === 1) {
                        that.allUser = res.data.data.allUser;
                    } else {
                        window.alert(res.data.msg);
                    }
                }).catch(function (err) {
                    console.log("请求失败");
                });
            }
        }
    });

    // 柱状图
    function loadG() {
        chart.showLoading("Loading....");
        var consumernumber = [];
        var consumertypes = [];
        axios.post('http://localhost:8080/api/sum/selectAllSum').then(function (res) {
            if (res.data.code === 1) {
                var data = res.data.data;
                var datalength = res.data.data.length;
                for (var i = 0; i < datalength; i++) {
                    consumernumber[i] = data[i].number;
                    consumertypes[i] = data[i].types;
                }
                var consumernumberseries = {
                    data: consumernumber,
                    name: "专业"
                };
                chart.addSeries(consumernumberseries);
                chart.xAxis[0].setCategories(consumertypes, true);
            } else {
                window.alert(res.data.msg);
            }
        }).catch(function (err) {
            console.log("请求失败");
        });
        chart.hideLoading("Loading....");
    }

    // 饼图
    function loadG1() {
        chart1.showLoading("Loading....");
        var userCount = [];
        var userType = [];
        axios.post('http://localhost:8080/api/user-count/count-user-number').then(function (res) {
            if (res.data.code === 1) {
                var data = res.data.data;
                var datalength = res.data.data.length;
                for (var i = 0; i < datalength; i++) {
                    userCount[i] = data[i].userCount;
                    userType[i] = data[i].userType;
                }
                var userCountseries = {
                    name: userType,
                    data: userType.map(function (type, index) {
                        return [type, userCount[index]];
                    })
                };
                chart1.addSeries(userCountseries);
                var seriesData = userType.map(function (type, index) { return [type, userCount[index]]; });
                var userCountseries1 = {
                    type: 'pie',
                    name: 'Browsers',
                    data: seriesData
                };
                console.log(userCountseries1.data);
                chart1.addSeriesAsDrillData(userCountseries1, 'browsers');
            } else {
                window.alert(res.data.msg);
            }
        }).catch(function (err) {
            console.log("请求失败");
        });
        chart1.hideLoading("Loading....");
    }

    // 自执行函数
    (function () {
        loadG();
        loadG1();
    })();
</script>

<style>
    .t_main {
        height: 360px;
        width: 600px;
        margin: 10px;
        border: 1px solid #adadad;
        background-color: #ffffff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        transition: 0.3s;
    }

    .t_main:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .t_main_in {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 160px;
        width: 200px;
        margin: 10px;
        border: 1px solid #adadad;
        background-color: #ffffff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        transition: 0.3s;
    }

    .t_main_in:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .ta {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .ta_value {
        font-size: 30px;
        font-weight: bold;
        color: #007BFF;
    }
</style>

</body>
</html>
